import {useState} from 'react';

const Search=({search})=>{
    // 都会重新渲染局部
    // state 组件内的数据
    // reducer 全局共享数据
    const [searchValue,setsearchValue]=useState('');
    const handleSearchInputChange=e=>{
        setsearchValue(e.target.value.trim());
    }
    const callSearchFunction=(e)=>{
        e.preventDefault();
        search(searchValue);
        resetInputField();
    }
    const resetInputField=()=>{
        setsearchValue('');
    }
    return (
        <form>
            <input type="text" value={searchValue}
            onChange={handleSearchInputChange} />
            <input type="submit" value="Search" onClick={callSearchFunction} />
        </form>
    )
}
export default Search;